<template>
  <section class="real-app">
      <input
        type="text"
        class="add-input"
        autofocus
        placeholder="接下来要去做什么"
        @keyup.enter="addTodo"
      >
      <Item 
        v-for="todo in filteredTodos"
        :key="todo.id"
        :todo="todo"
        @del="deleteTodo"
        @toggleCompleted="saveTodos"

      />
      <Tabs 
        :filter="filter" 
        :todos='todos'
        @toggle="toggleFilter"
        @clearAllCompleted="clearAllCompleted"
        />
  </section>
  
</template>

<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
import store from 'storejs'


export default {
  data () {
      return{
          todos:[],
          filter:'all',
          nextid:0
      }
  },
  computed: {
      filteredTodos(){
          if(this.filter=="all"){
              return this.todos
          } else{
              return this.todos.filter(todo => todo.completed==("completed"==this.filter))
          }
      }
  },
  methods: {
      addTodo(e){
          this.todos.unshift({
              id:this.nextid++,
              content:e.target.value.trim(),
              completed:false
          })
          e.target.value=''
      },
      deleteTodo(id){
          this.todos.splice(this.todos.findIndex(todo => todo.id===id),1)
      },
      toggleFilter(state){
          this.filter=state
      },
      clearAllCompleted(){
          this.todos=this.todos.filter(todo=> !todo.completed)
      },
      saveTodos(){
          store('todos',JSON.stringify(this.todos))
      }
  },
  watch: {
      todos(){
          this.saveTodos()
      },
      filter(){
          store('filter',this.filter)
      }
  },
  components: {
      Item,Tabs
  },
  mounted () {
    console.log("**加载成功，读取localStorage数据******************************")
    var str=store('todos')
    try{
        var todos=JSON.parse(str) 
        if (todos instanceof Array) {
            console.log("**parse成功******************************")
            console.log(todos)
            this.todos= todos
            for(var i=0,len=todos.length;i<len;i++){   //循环找到最大的id
                if (this.nextid<=todos[i].id) this.nextid=todos[i].id+1
            }
            console.log("nextid:"+this.nextid)
        }else{
            console.log("**parse后不是数组******************************")
            console.log(str)
        }

    }catch(e){
        console.log("**parse失败******************************")
        console.log(str)
    }
    var filter=store('filter')      
    if (filter=="active" || filter=="completed") this.filter=filter
  }
}
</script>
<style lang="stylus" scoped>
.real-app{
    width 600px
    margin :0px  auto
    box-shadow :0px 0px 5px #666
}
.add-input{
    positon:relative;
    margin 0px
    width 100%
    font-size 24px
    font-family  inherit 
    font-weight:inherit
    line-height 1.4rem
    border 0;
    outline none 
    color inherit
    padding 6px
    border 1px solid #999
    box-shadow: inset 0 -1px 5px 0px rgba(0,0,0,0)
    box-sizing border-box
    font-smoothing:antialiased;
    padding 16px 16px 16px 60px
    border none  
}
</style>
